<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        /* Make the image fully responsive */
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body id="bd">
    <script src="./main.js"></script>
    <div class="advertising">
        <ul>
            <li>
                <img src="./img/删除.png" style="width: 10px;height: 10px;">
            </li>
            <li><img src="./img/jdlog.png" style="width: 30px;height: 30px;vertical-align: middle;"></li>
            <li>打开京东App，购物更轻松</li>
            <li>立即打开</li>
        </ul>
    </div>
    <div class="search">
        <div class="menu"></div>
        <div class="search-bar">
            <div class="search-rad">
                <img class="jd" src="./img/jd.png">
                <i></i>
                <input id="ipt" type="text" placeholder="格兰仕空调">
            </div>
        </div>
        <div class="login">登录</div>
    </div>
    <div class="slider">
        <div id="demo" class="carousel slide" data-ride="carousel" style="height: 140px;width: 93%;">

            <!-- 指示符 -->
            <ul class="carousel-indicators" style="margin: 0;">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
                <li data-target="#demo" data-slide-to="3"></li>
            </ul>

            <!-- 轮播图片 -->
            <div class="carousel-inner" style="border-radius:15px;overflow: hidden;">
                <div class="carousel-item active">
                    <img src="img/茅台1.jpg">
                    <!-- <div class="carousel-caption">
                    <h3>第一张图片描述标题</h3>
                    <p>描述文字!</p>
                </div> -->
                </div>
                <div class="carousel-item">
                    <img src="./img/零食.jpg">
                    <!-- <div class="carousel-caption">
                    <h3>第二张图片描述标题</h3>
                    <p>描述文字!</p>
                </div> -->
                </div>
                <div class="carousel-item">
                    <img src="./img/家具.jpg">
                    <!-- <div class="carousel-caption">
                    <h3>第三张图片描述标题</h3>
                    <p>描述文字!</p>
                </div> -->
                </div>
                <div class="carousel-item">
                    <img src="./img/拖地机.jpg">
                    <!-- <div class="carousel-caption">
                    <h3>第三张图片描述标题</h3>
                    <p>描述文字!</p>
                </div> -->
                </div>
            </div>

            <!-- 左右切换按钮 -->

        </div>
    </div>
    <div class="a">
        <div class="nav-bar clearfix">
            <ul class="nav-l ">
                <li><img src="./img/超市.jpg"><span>京东超市</span></li>
                <li><img src="./img/3c.jpg"><span>数码电器</span></li>
                <li><img src="./img/衣服.jpg"><span>京东服务</span></li>
                <li><img src="./img/菜篮.jpg"><span>京东生鲜</span></li>
                <li><img src="./img/1小时.jpg"><span>京东到家</span></li>
                <li><img src="./img/充值.jpg"><span>充值缴费</span></li>
                <li><img src="./img/车子.jpg"><span>物流查询</span></li>
                <li><img src="./img/领卷.jpg"><span>领卷</span></li>
                <li><img src="./img/红包.jpg"><span>领金贴</span></li>
                <li><img src="./img/会员.jpg"><span>PLUS会员</span></li>
            </ul>
            <!-- <ul class="nav-r ">
                <li><img src="./img/超市.jpg"><span>京东超市</span></li>
                <li><img src="./img/3c.jpg"><span>数码电器</span></li>
                <li><img src="./img/衣服.jpg"><span>京东服务</span></li>
                <li><img src="./img/菜篮.jpg"><span>京东生鲜</span></li>
                <li><img src="./img/1小时.jpg"><span>京东到家</span></li>
                <li><img src="./img/充值.jpg"><span>充值缴费</span></li>
                <li><img src="./img/车子.jpg"><span>物流查询</span></li>
                <li><img src="./img/领卷.jpg"><span>领卷</span></li>
                <li><img src="./img/红包.jpg"><span>领金贴</span></li>
                <li><img src="./img/会员.jpg"><span>PLUS会员</span></li>
            </ul> -->
            <ul class="radio">
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="seckill">
        <div class="seckill-top">
            <div class="title-wrap">
                <div class="title-wrap-l">京东秒杀</div>
                <div class="title-wrap-c">
                    <span>20</span>
                    <div id="seckill_time" class="seckill-timer">
                        <div class="seckill-time j_sk_h">00</div>
                        <span class="seckill-time-separator">:</span>
                        <div class="seckill-time j_sk_m">00</div>
                        <span class="seckill-time-separator">:</span>
                        <div class="seckill-time j_sk_s">00</div>
                    </div>
                </div>
                <div class="title-wrap-r">更多秒杀</div>
            </div>
            <ul class="seckill-slider">
                <li><img src="./img/手机.jpg">
                    <p>¥888</p>
                </li>
                <li><img src="./img/手机.jpg">
                    <p>¥888</p>
                </li>
                <li><img src="./img/手机.jpg">
                    <p>¥888</p>
                </li>
                <li><img src="./img/手机.jpg">
                    <p>¥888</p>
                </li>
                <li><img src="./img/手机.jpg">
                    <p>¥888</p>
                </li>
                <li><img src="./img/手机.jpg">
                    <p>¥888</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="similar">
        <ul class="similar-top">
            <li>
                <img src="./img/电脑.png">
                <span class="similar-product-text">
                    酷睿i7+独显/15.6英寸十代高配金属笔记本电脑轻薄本商务大学生上网课IRU超薄便携超极游戏本手提 十代四核英特尔J4115 8G内存/256G固态硬盘
                </span>
                <p><span class="pic"><em>¥</em>3998</span> <span class="sg">闪购</span><span class="kxs">看相似</span></p>
            </li>
            <li>
                <img src="./img/手机.png">
                <span class="similar-product-text">
                    酷睿i7+独显/15.6英寸十代高配金属笔记本电脑轻薄本商务大学生上网课IRU超薄便携超极游戏本手提 十代四核英特尔J4115 8G内存/256G固态硬盘
                </span>
                <p><span class="pic"><em>¥</em>3998</span><span class="sg">闪购</span><span class="kxs">看相似</span></p>
            </li>
            <li>
                <img src="./img/电脑.png">
                <span class="similar-product-text">
                    酷睿i7+独显/15.6英寸十代高配金属笔记本电脑轻薄本商务大学生上网课IRU超薄便携超极游戏本手提 十代四核英特尔J4115 8G内存/256G固态硬盘
                </span>
                <p><span class="pic"><em>¥</em>3998</span><span class="sg">闪购</span><span class="kxs">看相似</span></p>
            </li>
            <li>
                <img src="./img/电脑.png">
                <span class="similar-product-text">
                    酷睿i7+独显/15.6英寸十代高配金属笔记本电脑轻薄本商务大学生上网课IRU超薄便携超极游戏本手提 十代四核英特尔J4115 8G内存/256G固态硬盘
                </span>
                <p><span class="pic"><em>¥</em>3998</span><span class="sg">闪购</span><span class="kxs">看相似</span></p>
            </li>
            <li>
                <img src="./img/电脑.png">
                <span class="similar-product-text">
                    酷睿i7+独显/15.6英寸十代高配金属笔记本电脑轻薄本商务大学生上网课IRU超薄便携超极游戏本手提 十代四核英特尔J4115 8G内存/256G固态硬盘
                </span>
                <p><span class="pic"><em>¥</em>3998</span><span class="sg">闪购</span><span class="kxs">看相似</span></p>
            </li>
            <li>
                <img src="./img/电脑.png">
                <span class="similar-product-text">
                    酷睿i7+独显/15.6英寸十代高配金属笔记本电脑轻薄本商务大学生上网课IRU超薄便携超极游戏本手提 十代四核英特尔J4115 8G内存/256G固态硬盘
                </span>
                <p><span class="pic"><em>¥</em>3998</span><span class="sg">闪购</span><span class="kxs">看相似</span></p>
            </li>
        </ul>
    </div>
    <div class="foo" style=" position: sticky;bottom: 0;">
        <ul class="foo-b">
            <li><img src="./img/首页.png"></li>
            <li><img src="./img/分类.png"></li>
            <li><img src="./img/京喜.png"></li>
            <li><img src="./img/购物车.png"></li>
            <li><img src="./img/未登录.png"></li>
        </ul>
    </div>
</body>

</html>